<template>
  <page-drawer v-model="collectOpen" :title='title' :icon='icon'>
    <div class="collectionWrapper">
      <xum-hint :visible="!isLogin">未登录，请登录后查看！</xum-hint>
      <template v-if="!isLogin">
        <good-box-simple v-for="item in goods" :key="item.id" v-bind="item"/>
      </template>
    </div>
  </page-drawer>
</template>

<script>
import PageDrawer from './PageDrawer'
import GoodBoxSimple from '@/components/general/goods/GoodBoxSimple'
import product1 from '@img/product/product-1.jpg'
import { ResultCode } from '@/constants/constants'
import { queryAllEnshrineConvertGoods } from '@/api/ApiEnshrineGoods'
import { mapGetters, mapState } from 'vuex'
import XumHint from '@/components/XumHint'

export default {
  name: 'CollectDrawer',
  props: ['open'],
  components: {
    XumHint,
    GoodBoxSimple,
    'page-drawer': PageDrawer
  },
  model: {
    prop: 'open',
    event: 'change'
  },
  data: () => {
    return {
      loading: false,
      collectOpen: false,
      title: 'Wishlist',
      icon: 'el-icon-star-off',
      goods: []
    }
  },
  computed: {
    ...mapGetters('user', ['isLogin']),
    ...mapState('user', ['userInfo'])
  },
  methods: {
    convertDetailToItem (detail) {
      const item = {}
      item.id = detail.id
      item.title = detail.name
      item.hot = detail.score
      if (detail['subGoodList'] && typeof detail['subGoodList'] === 'object') {
        detail['subGoodList'].forEach((sub, index) => {
          if (index === 0) {
            item.price = sub.price
          }
          if (item.price > sub.price) {
            item.price = sub.price
          }
        })
      }
      const pictures = detail['goodPictureList']
      if (pictures && typeof pictures === 'object') {
        if (pictures.length === 0) {
          item.image1 = product1
          item.image2 = product1
        }
        if (pictures.length === 1) {
          item.image1 = pictures[0].image
          item.image2 = pictures[0].image
        }
        if (pictures.length > 1) {
          item.image1 = pictures[0].image
          item.image2 = pictures[1].image
        }
      }
      return item
    },
    queryData () {
      this.goods = []
      if (this.isLogin) {
        this.loading = true
        queryAllEnshrineConvertGoods(data => {
          if (data && data.code === ResultCode.OK) {
            const goodsData = data.object
            const list = []
            goodsData.forEach(item => {
              list.push(this.convertDetailToItem(item))
            })
            this.goods = list
          }
        }, () => {
          this.loading = false
        })
      }
    }
  },
  mounted () {
    this.queryData()
  },
  watch: {
    open (val) {
      this.collectOpen = val
    },
    collectOpen () {
      this.$emit('change', this.collectOpen)
    },
    userInfo () {
      this.queryData()
    }
  }
}
</script>

<style lang="scss">

  .collectionWrapper{
    overflow-y: scroll;
    overflow-x: hidden;
    height: 500px;
    padding: 10px 40px
  }

</style>
